<template>
	<sw-common-frame :count="dataCount" :loading="loading">
		<template slot="button">
			<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
		</template>
		<el-form slot="query" size="small" inline>
			<el-form-item>
				<el-input v-model="queryData.name" clearable placeholder="菜单名称" style="width: 200px"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="handleQueryTableData()">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table slot="table" :data="tableListData" v-bind="tableConfig" @row-click="handleRowClick">
			<el-table-column label="导航名称" prop="name" min-width="240" show-overflow-tooltip />
			<el-table-column label="导航类型" min-width="80" align="center">
				<template slot-scope="{ row }">
					<el-tag size="small" type="warning" v-if="row.isOutsite === '1'">链接</el-tag>
					<el-tag size="small" v-else-if="row.isOutsite === '2'">目录</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="导航链接" prop="value" min-width="200"></el-table-column>
			<el-table-column label="是否显示" min-width="80" align="center">
				<template slot-scope="{ row }">
					<el-switch v-model="row.isShow" active-value="1" inactive-value="2" @change="handleSwitchShow($event, row)" />
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
			<el-table-column label="操作" width="210" align="right" header-align="left">
				<el-button-group slot-scope="{ row }">
					<template v-if="row.isOutsite === '2'">
						<el-button size="mini" type="info" @click.stop="handleAddChildren(row)">添加子级</el-button>
					</template>
					<el-button size="mini" type="warning" @click.stop="handleOpenDialog(row.id)">修改</el-button>
					<el-button size="mini" type="danger" @click.stop="handleDeleteData(row)">删除</el-button>
				</el-button-group>
			</el-table-column>
		</el-table>
		<form-dialog v-model="formDialog" :child.sync="isChildren" :data-id="dataId" :list="menuListData" :top-id="topId" @refresh="queryTableData()" />
	</sw-common-frame>
</template>

<script>
import lodash from 'lodash';
import formDialog from './form';
import listMixins from '@/mixins/listMixins';
import { addedColumn, updateColumn } from '@/api/website/sysWebColumn';
import { getColumnData, deleteColumn } from '@/api/website/sysWebColumn';
export default {
	mixins: [listMixins],
	components: { formDialog },
	data() {
		return {
			pageName: '顶部导航',
			isChildren: false,
			classType: '101',
			tableConfig: {
				ref: 'table',
				rowKey: 'id',
				size: 'medium',
				height: '100%'
			},
			queryName: ''
		};
	},
	computed: {
		listFunction() {
			return eval(getColumnData);
		},
		deleteFunction() {
			return eval(deleteColumn);
		},
		requestParams() {
			return { pid: '0', classType: this.classType };
		},
		topId() {
			return this.tableData[0]?.id || '';
		},
		menuListData() {
			let listData = this.$treeToFlat(this.tableData, 'childList');
			let treeData = listData.filter((n) => n.pid !== '0');
			return this.$flatToTree(treeData, 'pid', this.topId);
		},
		tableListData() {
			let name = this.queryName.toLowerCase();
			let filterTreeData = (nodes) => {
				let filtered = [];
				nodes.forEach((node) => {
					if (node.name.toLowerCase().includes(name)) {
						let child = node.children ? filterTreeData(node.children) : [];
						if (child.length) {
							filtered.push({ ...node, children: child });
						} else {
							filtered.push(node);
						}
					} else if (node.children) {
						let children = filterTreeData(node.children);
						if (children.length) {
							filtered.push({ ...node, children });
						}
					}
				});
				return filtered;
			};
			return filterTreeData(this.menuListData);
		}
	},
	watch: {
		queryName() {
			this.$refs['table'].doLayout();
		},
		tableData(arr) {
			if (arr.length > 0) return false;
			this.handleAddedTopNav();
		}
	},

	methods: {
		//查询部门
		handleQueryData() {
			this.queryName = lodash.cloneDeep(this.queryData.name);
		},

		//添加子级
		handleAddChildren(data) {
			this.dataId = data.id;
			this.formDialog = true;
			this.isChildren = true;
		},

		//行点击事件
		handleRowClick(row, column, event) {
			this.$refs['table'].toggleRowExpansion(row);
		},

		//初始新增顶部导航
		async handleAddedTopNav() {
			let obj = { ...this.requestParams, isShow: '2' };
			let params = { ...obj, name: '顶部导航', classLevel: '1' };
			let result = await addedColumn(params).then((res) => res.data);
			if (result.code === '0') {
				this.handleQueryTableData();
			}
			console.log(result);
			console.log(params);
		},

		//设置顶部导航是否显示
		async handleSwitchShow(isShow, data) {
			let checkeds = lodash.filter(this.menuListData, { isShow: '1' });
			if (checkeds.length > 5) {
				this.$showCustomMessage('warning', '最多只能显示5个顶部导航');
				data.isShow = '2';
			} else {
				let params = { ...data, isShow };
				let result = await updateColumn(params).then((res) => res.data);
				if (result.code === '0') {
					this.$showCustomMessage('success', `${isShow === '1' ? '显示' : '隐藏'}顶部导航成功`);
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped></style>
